<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件处理</title>
    <script
        type="text/javascript"
        src="../vue.js"
    ></script>
    </head>

    <body>
        <!--
        事件：
        1.v-on:xxx或者@xxx绑定事件，xxx是事件名
        2.事件的回调需要在methods中，最终会在vm里
        3.methods中配置的函数不能是箭头函数，箭头函数没有this（this指向wind）
        4.methods中配置的函数this均指向vm
        5.事件可以传参，也可以不传参
        -->

        <div id="p1">
            <h1>hello,{{name}}</h1>
            <!--<button v-on:click ="showInfo">点我提示</button>-->
            <button @click="showInfo1">点我提示1(不传参）</button>
            <button @click="showInfo2(66,$event)">点我提示2（传参）</button>

        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;

            const vm = new Vue({
                data() {
                    return {
                        name: 'Marina',
                    }
                },
                methods: {
                    showInfo1(event) {
                        console.log(event.target.innerText)
                        console.log(this === vm)
                    },
                    showInfo2(number,event) {
                        console.log('第二个展示信息')
                        console.log(number,event)
                    }
                }
            })

            vm.$mount('#p1');
        </script>
    </body>
</html>